<template>
    <el-menu
      router
      default-active="2"
      class="sidebar-menu"
      background-color="#001529"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <el-menu-item index="/dashboard">
        <el-icon><HomeFilled /></el-icon>
        <span>系统首页</span>
      </el-menu-item>
      <el-menu-item index="/stock">
        <el-icon><Box /></el-icon>
        <span>库存管理</span>
      </el-menu-item>
      <el-menu-item index="/user">
        <el-icon><User /></el-icon>
        <span>人员管理</span>
      </el-menu-item>
      <el-sub-menu index="system">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/system/workflow">流程管理</el-menu-item>
        <el-menu-item index="/system/permission">权限管理</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script setup>
  import {
    HomeFilled,
    Box,
    User,
    Setting
  } from '@element-plus/icons-vue'
  </script>
  
  <style lang="scss" scoped>
  .sidebar-menu {
    border-right: none;
    height: 100%;
  
    :deep(.el-sub-menu__title) {
      background-color: #000c17 !important;
    }
  
    .el-menu-item {
      &:hover {
        background-color: #263445 !important;
      }
  
      &.is-active {
        background-color: #1890ff !important;
      }
    }
  }
  </style>